<script setup lang="ts">

import { ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";

const activeP = ref("dashboard")
const saveNavState = (activePath: string) => {
  window.sessionStorage.setItem('activePath', activePath)
  //router.push(`/${activePath}`)
  activeP.value = activePath
}
let router = useRouter();
const logout = () => {
  ElMessageBox.confirm(
      '确认退出',
      {
        confirmButtonText: 'OK',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        sessionStorage.clear()
        router.push('/login')
        ElMessage({
          type: 'success',
          message: '退出成功',
        })
      })
}
</script>

<template>
  <el-menu
      :default-active="activeP"
      class="el-menu-demo"
      background-color="#b0d9e8"
      active-text-color="#8a2562"
      text-color="#020303"
      mode="horizontal"
      :ellipsis="false"
      router
  >
    <el-menu-item index="0">
      <img
          style="width: 50px"
          src="/favicon1.png"
          alt="Element logo"
      />
      <h3>
        校园兴趣圈交流管理系统
      </h3>
    </el-menu-item>
    <div class="flex-grow"/>
    <el-menu-item index="dashboard" @click="saveNavState('dashboard')">首页</el-menu-item>
    <el-menu-item index="user" @click="saveNavState('user')">用户管理</el-menu-item>
    <el-menu-item index="group" @click="saveNavState('group')">交流群管理</el-menu-item>
    <el-menu-item index="blog" @click="saveNavState('blog')">博文管理</el-menu-item>
    <el-menu-item index="review" @click="saveNavState('review')">评论管理</el-menu-item>
    <el-sub-menu>
      <template #title>
        <span>欢迎</span>
      </template>
      <el-menu-item @click="logout">退出系统</el-menu-item>
    </el-sub-menu>
  </el-menu>

</template>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>